<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>指定拖动区域</title>
<link rel="stylesheet" href="css/jquery.dad.css">
<style>
.jq22 { width: 1000px; margin: 0 auto; font-family: arial,SimSun; font-size: 0;}
.jq22 .item { display: inline-block; width: 230px; margin: 0 20px 20px 0; background-color: #ccc;}
.jq22 .item1 { background-color: #1faeff;}
.jq22 .item2 { background-color: #ff2e12;}
.jq22 .item3 { background-color: #00c13f;}
.jq22 .item4 { background-color: #e1b700;}
.jq22 .item5 { background-color: #7200ac;}
.jq22 .item6 { background-color: #ff76bc;}
.jq22 .item7 { background-color: #001e4e;}
.jq22 .item8 { background-color: #632f00;}
.jq22 h4 { margin: 0; padding: 0.5rem; border-bottom: 1px solid #ccc; font-size: 0.75rem; color: #fff;}
.jq22 span { display: block; line-height: 100px; font-size: 2rem; text-align: center; color: #fff;}
</style>
</head>

<body>
<h1>指定拖动区域</h1>

<div class="jq22">
	<div class="item item1">
		<h4>标题</h4>
		<span>1</span>
	</div>
	<div class="item item2">
		<h4>标题</h4>
		<span>2</span>
	</div>
	<div class="item item3">
		<h4>标题</h4>
		<span>3</span>
	</div>
	<div class="item item4">
		<h4>标题</h4>
		<span>4</span>
	</div>
	<div class="item item5">
		<h4>标题</h4>
		<span>5</span>
	</div>
	<div class="item item6">
		<h4>标题</h4>
		<span>6</span>
	</div>
	<div class="item item7">
		<h4>标题</h4>
		<span>7</span>
	</div>
	<div class="item item8">
		<h4>标题</h4>
		<span>8</span>
	</div>
</div>

<p class="jq22-explain">标题部分才可以拖放</p>

<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/jquery.dad.min.js"></script>
<script>
$(function(){ 
	$('.jq22').dad({
		draggable: 'h4'
	});
});
</script>

</body>
</html>